<template>
  <div>
    <div v-if="infoShow">
      <div style="position: absolute;right: 10px;border:unset;" @click="closeInfo()">
        <svg
          t="1722230526713"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4475"
          width="48"
          height="48"
          fill="RGBA(0,0,0,0.5)"
        >
          <path
            d="M512 85.333333C276.48 85.333333 85.333333 276.48 85.333333 512S276.48 938.666667 512 938.666667 938.666667 747.52 938.666667 512 747.52 85.333333 512 85.333333z m136.533333 531.342223c11.377778 11.377778 11.377778 29.582222 0 39.822222-5.688889 5.688889-12.515556 7.964444-20.48 7.964444s-14.791111-2.275556-20.48-7.964444L512 559.786667l-96.711111 96.711111c-5.688889 5.688889-12.515556 7.964444-20.48 7.964444s-14.791111-2.275556-20.48-7.964444c-11.377778-11.377778-11.377778-29.582222 0-39.822222l96.711111-96.711112-104.675556-104.675555c-11.377778-11.377778-11.377778-29.582222 0-39.822222 11.377778-11.377778 29.582222-11.377778 39.822223 0l104.675555 104.675555 104.675556-104.675555c11.377778-11.377778 29.582222-11.377778 39.822222 0 11.377778 11.377778 11.377778 29.582222 0 39.822222l-104.675556 104.675555 97.848889 96.711112z"
            p-id="4476"
          ></path>
        </svg>
      </div>
      <instrument-info :deviceId="deviceId" />
    </div>
    <a-row v-else-if="!infoShow" :gutter="12" class="instrument-page">
      <a-col :span="0">
        <a-card class="left-card" :bordered="false">
          <div style="text-align: center">
            <a-avatar :size="128">{{ workshopName }}</a-avatar>
            <a-divider></a-divider>
            <!-- <a-row>
            <template v-for="(item,index) in statusList">
              <a-col :span="12">
                <a-tag :color="colorList[index]">{{ status[index] }}</a-tag>
                <p><span class="number">{{item}}</span>个</p>
              </a-col>
            </template>
          </a-row> -->
            <div class="left-bottom">
              <a-card>
                <img class="left-icon" src="@/assets/energy/yongdian.png" />
                <p>昨日用电量</p>
                <p>{{ elecTotal }} kw·h</p>
              </a-card>
              <a-card>
                <img class="left-icon" src="@/assets/energy/nenghao.png" />
                <p>上月用水量</p>
                <p>{{ waterTotal }} m³</p>
              </a-card>
              <a-card>
                <img class="left-icon" src="@/assets/energy/nenghao.png" />
                <p>昨日蒸汽用量</p>
                <p>{{ steamTotal }} m³</p>
              </a-card>
              <a-card>
                <img class="left-icon" src="@/assets/energy/nenghao.png" />
                <p>昨日燃气用量</p>
                <p>{{ gasTotal }} m³</p>
              </a-card>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card class="right-card" :bordered="false">
          <div class="table-pagef-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row >
                <a-col :md="5" :sm="12">
                  <a-form-item label="运行情况" prop='deviceUseStatus'>
                    <j-dict-select-tag
                      :style="{ width: '160px' }"
                      type='list' v-model='queryParam.status'
                      dictCode='device_online_status'
                      placeholder='请选择运行情况' />
                  </a-form-item>
                </a-col>
                <a-col :md="5" :sm="12">
                  <a-form-item label="设备名称"  prop='deviceUseStatus'>
                  <j-dict-select-tag placeholder="请选择设备名称" :style="{ width: '160px' } " v-model="queryParam.deviceName" dictCode="Tsl_shebei_Switch"/>
                </a-form-item>
                </a-col>
                <a-col :md="5" :sm="12">
                  <a-form-item label="日期"  prop='deviceUseStatus'>
                    <a-range-picker v-model="queryParam.time"  :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" @change="handleDateChange" :style="{ width: '280px' } " />
                  </a-form-item>
                </a-col>
                <!-- <a-col :md="4" :sm="12">
                <a-form-item label="能源类型" :labelCol="{ span: 8 }" :wrapperCol="{ span: 15, offset: 1 }">
                  <a-select
                    :style="{ width: '128px' }"
                    placeholder="请选择能源类型"
                    v-model="queryParam.type"
                  ></a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="12">
                <a-form-item label="网关识别号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 15, offset: 1 }">
                  <a-input :style="{ width: '156px' }" />
                </a-form-item>
              </a-col> -->

                <a-col :md="10" :sm="24">
                  <a-button type="primary" @click="searchQuery" icon='search'>查询</a-button>
                  <a-button style="margin-left: 8px" type="primary"  @click="searchReset">重置</a-button>
                  <a-button style="margin-left: 8px" type="primary" icon="download" @click="handleExportXls('仪表监控')">导出</a-button>
                  <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
                    <a-button style="margin-left: 8px"  type="primary" icon="import">导入</a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <a-row>
            <a-col>
              <a-radio-group :value="viewType" @change="handleViewTypeChange">
<!--                <a-radio-button :value="0"> <a-icon type="appstore" /> 网格视图 </a-radio-button>-->
                <a-radio-button :value="1"> <a-icon type="unordered-list" />列表视图 </a-radio-button>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row v-if="viewType === 0" :gutter="24" class="instrument-right-list">
            <a-col style="margin-bottom: 24px" :xs="24" :sm="12" :md="12" :lg="12" :xl="6" v-for="(item, index) in dataList" :key="item.id">
              <a-card :bordered="false" :loading="loading">
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                  <a-icon type="ellipsis" />
                  <a-tag :color="colorList[item.status]">{{ status[item.status] }}</a-tag>
                </div>
                <a-row style="margin-top: 12px">
                  <a-col :span="4">
                    <img src="@/assets/energy/wangguan.png" height="48" />
                  </a-col>
                  <a-col :span="18" :offset="2">
                    <p class="shenglue">
                      <span style="font-weight: 600;">{{ item.deviceName }}</span>
                    </p>
                    <p class="shenglue">
                      网关识别号：<span>{{ item.id }}</span>
                    </p>
                    <p class="shenglue">
                      仪表地址：<span>{{ item.url }}</span>
                    </p>
                    <p class="shenglue">
                      仪表型号：<span>{{ item.type }}</span>
                    </p>
                    <a-button style="float: right" size="small" @click="detail(item.id)">详情</a-button>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
          <a-table
            v-else
            rowKey="id"
            :columns="columns"
            :dataSource="dataList"
            v-on="$listeners"
            :pagination="ipagination"
            @change="handleTableChange"
          >
            <!--          <template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">-->
            <!--            <slot :name="slotItem" v-bind="{text,record,index}"></slot>-->
            <!--          </template>-->
            <template slot="status" slot-scope="text, record, index">
              <a-tag :color="colorList[text]">{{ status[text] }}</a-tag>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import InstrumentInfo from './InstrumentInfo'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
const dataList = []
const colorList = ['', 'green', 'orange', 'red']
const status = ['离线', '在线']
const userInfo = {
  username: 'admin'
}
const statusList = [41, 227, 0, 0]
const columns = [
  { title: '状态', align: 'center', width: 60, dataIndex: 'status', scopedSlots: { customRender: 'status' } },
  { title: '设备名称', align: 'center', dataIndex: 'deviceName' },
  { title: '累计在线时长', align: 'center', dataIndex: 'runTime',customRender: (text) =>text!=null? `${text} 分钟`:text }
]
export default {
  mixins: [JeecgListMixin],
  data() {
    return {
      infoShow: false,
      workshopId: '',
      deviceId: '',
      workshopName: '特丝丽',
      columns,
      dataList,
      userInfo,
      statusList,
      colorList,
      status,
      queryParam: {
        type: '',
        startTime: '',
        deviceName: '',
        satus: ''
      },
      loading: false,
      viewType: 1,
      elecTotal: 0,
      waterTotal: 0,
      gasTotal: 0,
      steamTotal: 0,
      url:{
        list:"/device/eneDevice/instrument/list",
        exportXlsUrl: '/device/eneDevice/instrumentExportXls',
        importExcelUrl: '/device/eneDevice/importExcel'
      }
    }
  },
  components: { InstrumentInfo },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    handleDateChange(dates, dateStrings) {
      // dateStrings 是格式化的字符串数组，如 ["2025-05-01", "2025-05-15"]
      this.queryParam.startTime = dateStrings.join(','); // 转换为 "2025-05-01,2025-05-15"
    },
    // workshopChnage(value, label) {
    //   this.workshopName = label ?? '特丝丽'
    //   let lastUrl = '/device/eneDevice/list?deviceWorkshopId=' + value
    //   getAction(lastUrl, null).then(res => {
    //     this.dataList = res.result.records
    //     this.dataList.forEach(item => {
    //       item.type = item.deviceBrandId_dictText + ' / ' + item.deviceTypeId_dictText
    //       item.url = item.devicePosition || item.deviceWorkshopId_dictText
    //       item.status = 0
    //     })
    //   })
    //
    //   let lastUrl2 = '/report/view/statis?workshopName=' + label
    //   getAction(lastUrl2, null).then(res => {
    //     this.elecTotal = res.result.elec
    //     this.gasTotal = res.result.gas
    //     this.steamTotal = res.result.steam
    //     this.waterTotal = res.result.water
    //   })
    // },
    // searchReset() {
    //   this.workshopId = ''
    //   this.workshopName = '特丝丽'
    //   let lastUrl = '/device/eneDevice/list'
    //   getAction(lastUrl, null).then(res => {
    //     this.dataList = res.result.records
    //     this.dataList.forEach(item => {
    //       item.type = item.deviceBrandId_dictText + ' / ' + item.deviceTypeId_dictText
    //       item.url = item.devicePosition || item.deviceWorkshopId_dictText
    //       item.status = 0
    //     })
    //   })
    //   let lastUrl2 = '/report/view/statis?workshopName='
    //   getAction(lastUrl2, null).then(res => {
    //     this.elecTotal = res.result.elec
    //     this.gasTotal = res.result.gas
    //     this.steamTotal = res.result.steam
    //     this.waterTotal = res.result.water
    //   })
    // },
    handleViewTypeChange(e) {
      this.viewType = e.target.value
      this.loadData(1);
    },
    detail(id) {
      this.infoShow = true
      this.deviceId = id
    },
    closeInfo() {
      this.infoShow = false
    },
    loadData(arg) {
      let params = this.getQueryParams() //查询条件
      // this.ipagination.pageSize = 9999
      if (arg === 1) {
        this.ipagination.current = 1;
        params.pageNo = 1;
      }
      if (this.viewType === 0) params.pageSize = 9999;
      if (this.checkedNodesIds && this.checkedNodesIds.length > 0)
        params.queryBrandTypeIds = this.checkedNodesIds.join(',')
      getAction(this.url.list, params).then(res => {
        if (res.success) {
          this.dataList = res.result.records
          this.dataList.forEach(item => {
            item.type = item.deviceBrandId_dictText + ' / ' + item.deviceTypeId_dictText
            item.url = item.devicePosition || item.deviceWorkshopId_dictText
            item.status = item.status==='1'? 1: 0
          })
          this.ipagination.total = res.result.total;
        }
      })
      let lastUrl2 = '/report/view/statis?workshopName='
      getAction(lastUrl2, null).then(res => {
        this.elecTotal = res.result.elec
        this.gasTotal = res.result.gas
        this.steamTotal = res.result.steam
        this.waterTotal = res.result.water
      })
    }
  },
  created() {
    this.loading = true
    let lastUrl = '/device/eneDevice/list'
    getAction(lastUrl, null).then(res => {
      this.dataList = res.result.records
      this.dataList.forEach(item => {
        item.type = item.deviceBrandId_dictText + ' / ' + item.deviceTypeId_dictText
        item.url = item.devicePosition || item.deviceWorkshopId_dictText
        item.status = 0
      })
    })
    let lastUrl2 = '/report/view/statis?workshopName='
    getAction(lastUrl2, null).then(res => {
      this.elecTotal = res.result.elec
      this.gasTotal = res.result.gas
      this.steamTotal = res.result.steam
      this.waterTotal = res.result.water
    })
    setTimeout(() => {
      this.loading = false
    }, 1000)
    this.loadData()
  }
}
</script>
<style scoped>
.instrument-right-list /deep/ .ant-card {
  background: rgba(145, 213, 255, 0.1);
}
.instrument-right-list /deep/ .ant-card-body {
  padding: 12px;
}
.table-pagef-search-wrapper {
  margin-bottom: 24px;
}
.number {
  font-size: 18px;
  font-weight: bolder;
}
.left-icon {
  float: left;
}
.left-bottom {
  text-align: right;
}
.left-bottom /deep/ .ant-card {
  margin-bottom: 24px;
  border-color: #91d5ff60;
  box-shadow: 1px 1px 3px #00000030;
}
.left-bottom /deep/ .ant-card-body {
  padding: 8px 12px;
}
.left-card,
.right-card {
  height: 80vh;
}
.shenglue{
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
</style>
